<template>
	<view class="modules">
		<view v-for="(item,index) in moduleList" :key="item.levelId">
			<view class="module-button" @click.native="componentClick(item.levelId)">
				<view class="module-icon" style="border-radius: 20rpx;overflow: hidden;">
					<u-image :src="item.icon" mode="scaleToFill" width="100rpx" height="100rpx"
					:showMenuByLongpress="false"></u-image>
				</view>
				<p style="text-align: center;">{{item.title}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import level1 from "static/imgs/level1.png"
	import level2 from "static/imgs/level2.png"
	import {productGrade} from "utils/enums/product"
	export default {
		name: "selectModule",
		data() {
			return {
				moduleList: [{
					levelId: productGrade.primary,
					title: "初级",
					icon: level1
				}, {
					levelId: productGrade.processing,
					title: "加工",
					icon: level2
				}],
			}
		},
		methods:{
			componentClick(id){
				this.$emit("componentClick",id)
			}
		}
	}
</script>

<style>
	.modules {
		display: flex;
		align-content: center;
		justify-content: flex-start;
	}

	.module-button {
		width: 100rpx;
		height: 100rpx;
		margin-right: 40rpx;
		font-size: 24rpx;
		color: rgba(255, 87, 51, 1);
		font-weight: 400;
	}

	.module-icon {
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0 0 20px #cccccc;
	}
</style>
